<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title>全一智慧安防平台</title>
    <Link Rel="SHORTCUT ICON" href="/pc/layout/img/logo1.png">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link Rel="SHORTCUT ICON" href="/pc/login/img/head_logo.png">
    <link rel="stylesheet" href="/pc/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/pc/layout/css/font_eolqem241z66flxr.css" media="all" />
    <link rel="stylesheet" href="/pc/layout/css/main.css" media="all" />
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <!--引用百度地图API-->
    <style type="text/css">
        .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
        .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
         .zb{
            margin-left: 2.5%;
        }
        .zb > img:hover{   
            -moz-transform: rotateZ(360deg);
            -o-transform:rotateZ(360deg);
            -ms-transform:rotateZ(360deg);
            -webkit-transform: rotateZ( 360deg);
            -webkit-transition: -webkit-transform 0.6s ease-in;
            background-color:#F0FFF0;      
            border-radius: 20%;
        }
          #qzbj{
        background-color: rgba(0,0,0,0.7);
        left: 16em;
              }
      #chartdiv{
        margin-top: -5.5em;
        margin-bottom: -5.5em;
        margin-left:-6em;
        text-align: left;
        width: 83%;
        height: 31em;
        overflow: hidden ;
        }
        @media  only screen and (max-width: 1252px){
          #qzbj{
                left: 0 ;
                  }
           #camera{
            left: 0;
           }
           #vlc{
            width: 100%
           }

        }
      
          @media  only screen and (min-width: 1252px) and (max-width: 1454px){
            #chartdiv{
              margin-left:-4em;       
            }
            #vlc{
            width: 62%;
          }
          #camera{
            left: 16em;
          }
           
        } 
           @media  only screen and (min-width: 1454px)and (max-width: 1650px){
         
          #vlc{
            width: 100%;
          }
            #camera{
            left: 16em;
          }
        }
         @media  only screen and (min-width: 1650px)and (max-width: 1655px){
          #camera{
            left: 16em;
          }
          #vlc{
            width: 70%
          }
         }
          @media  only screen and (min-width:1655px)and (max-width:1922px){
          #camera{
            left: 16em;
          }
          #vlc{
            width:581px;
          }
         }
        .hide{
              display: none;
        }  
        table {
       margin:0;
       padding:0;
       border-collapse: collapse;
       border-spacing: 0;
       margin: 0 auto;
       }

       table tr {
         padding: 5px;
       }
     #tbody1 > tr:first-child >td{
       font-weight: bold;
       font-size: 1em;
       color: #00FF00;
      }
       table th, table td {
         padding: 10px;
         text-align: center;
        
       }
       table th {
         text-transform: uppercase;
         font-size: 1.2em;
         letter-spacing: 1px;
       }
     .hide{
      display: none;
     }
    </style>
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote" style="background-color: #f1f1f1;margin-top:18px;">
    <input type="hidden" id="ag" key="{{$agent_id}}">
    <input type="hidden" id="ar" key="{{$ids}}">
    <!-- 导航条 -->
    <span class="zb hide"><img src="/pc/index/img/gateway.png" alt=""></span>
    <span class="zb hide"><img src="/pc/index/img/smoke.png" alt=""></span>
    <span class="zb hide"><img src="/pc/index/img/electric.png" alt=""></span>
    <span class="zb"><img src="/pc/index/img/infrared.png" alt=""></span>
    <span class="zb hide"><img src="/pc/index/img/gas.png" alt=""></span>
    <span class="zb"><img src="/pc/index/img/help.png" alt=""></span>
    <span class="zb"><img src="/pc/index/img/wuye.png" alt=""></span>
    <span class="zb hide"><img src="/pc/index/img/xiaofang.png" alt=""></span>
    <span class="zb"><img src="/pc/index/img/qihuodian.png" alt=""></span>
    <span class="zb"><img src="/pc/index/img/jingbao.png" alt="" name="jingbao"></span>
    <span class="zb"><img src="/pc/index/img/yonghu.png" alt=""></span>
</blockquote>
<div class="row">
        <!-- 地图 -->
    <div class="sysNotice col">       
        <div id="newMessageDIV"></div>
        <div class="layui-elem-quote layui-quote-nm" id="dituContent" style="width:120em;height:52em;border-left: 5.4px solid #18A890;">
        </div>
    </div>
         <!-- 报警信息 -->
<div class="sysNotice col"> 
 <!-- <blockquote class="layui-elem-quote title" id="qzbj" style="">
            <p style="color: red;font-size: 20px;text-align: left;">报警类型比例图</p>
         <div id="chartdiv"></div>
        </blockquote> -->    
<blockquote class="layui-elem-quote title" id="qzbj" style="">
  <div id="tab" style=" overflow: hidden; -webkit-tap-highlight-color: transparent;user-select: none;color: white; width: 43em;height:19em;"> 
    <table id="table1">
            <thead>             
                    <th style="font-weight: bold;">报警类型 </th>
                    <th style="font-weight: bold;">报警应用 </th>
                    <th style="font-weight: bold;">报警设备编号</th>
                    <th style="font-weight: bold;">报警时间</th>                   
                 
            </thead>
            <tbody id="tbody1">
            </tbody>
    </table>    
</div>
</blockquote>
</div>
         <!-- 视频 -->
     <div class="sysNotice col" id="cam" style="display: none;">
        <blockquote class="layui-elem-quote title" id="camera" style="margin-top: 0.5em;background-color: rgba(0,0,0,0.2)">
      <!--   <div style="height:20em;background-color: red;"  id="vlc" ></div> -->
        </blockquote>
    </div>
</div>
</body>
<script src="/pc/layout/js/jquery.min.js"></script>
<script type="text/javascript" src="/pc/layui/layui.js"></script>
<script src="/pc/index/js/socket.io.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=U25vSd26q851cuSCjMCXuFkYYemWxvRs"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="/pc/index/js/MarkerClusterer_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script src="/pc/index/js/mapF.js" async="async"></script>
</html>